<template>
	<el-upload :multiple="multiple" :show-file-list="showfilelist" ref="upload" class="upload-demo" :list-type="listtype"
		:data.sync="AnotherData" :action="action" :on-remove="handleRemove" :on-change.sync="handleChange"
		:on-success="handlesuccess" :on-error="handleerror" :file-list.sync="fileList" :headers="token"
		:auto-upload="autoupload">
		<el-button slot="trigger" :size="btnsize" type="primary">{{ content }}</el-button>
		<el-button v-show="upshow" style="margin-left: 10px;" :size="btnsize" type="success"
			@click="submitUpload_">上传到服务器</el-button>
	</el-upload>
</template>

<script>
	export default {
		name: "UploadFileF",
		props: {
			AnotherData: {
				type: Object,
				required: true
			},
			multiple: {
				type: Boolean,
				required: false,
				default: true,
			},
			upshow: {
				type: Boolean,
				default: false,
			},
			showfilelist: {
				type: Boolean,
				default: true,
			},
			content: {
				type: String,
				required: false,
				default: '选取文件',
			},
			btnsize: {
				type: String,
				required: false,
				default: 'mini',
			},
			//用于在父级页面添加数据
			Addlistdata: {
				type: Function,
				required: false,
				default: function() {
					return;
				}
			},
			listtype:{
				type: String,
				required: false,
				default: 'text',
			},
			autoupload: {
				type: Boolean,
				default: false
			},
			btnclass: {
				type: Object,
				default: function() {
					return {
						width: '100%'
					}
				}
			},
			//文件上传后的回调函数
			CallbackFun: {
				type: Function,
				required: false,
				default: function() {
					return;
				}
			},
		},
		data() {
			return {
				fileList: [],
				token: {
					Authorization: "Bearer " + window.sessionStorage.getItem('token')
				},
				update_result: true,
				apiresult: true,
				action: this.$http.defaults.baseURL + "PublicMethodApi/UploadFile/",
			}
		},
		methods: {
			submitUpload() {
				if (this.fileList.length > 0) {
					this.$refs.upload.submit();
				}
			},
			submitUpload_() {
				if (this.fileList.length > 0) {
					this.$refs.upload.submit();
				} else {
					this.$message.info('请选择你要上传的文件!');
				}
			},
			handleRemove(file, fileList) {
				this.fileList = fileList;
			},
			handleChange(file, fileList) {
				this.fileList = fileList;
				this.Addlistdata()
			},
			handlesuccess(response, file, fileList) {
				if (response) {
					this.$message.success('文件上传成功!')
					this.clearfilelist()
					this.CallbackFun()
				} else {
					this.$message.warning('文件上传失败,请重试!')
				}
			},
			handleerror() {
				this.clearfilelist()
				this.$message.warning('文件上传接口异常,请联系管理员!')
			},
			//清空已上传列表
			clearfilelist() {
				this.$refs.upload.clearFiles()
			}
		}
	}
</script>

<style scoped>

</style>